<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>定时- 深度睡眠</title>
	<link rel="stylesheet" href="/public/css/element.css">
	<script src="/public/js/vue.global.js"></script>
	<script src="/public/js/element-plue.js"></script>
<style>
.app{
	width: 90%;
	text-align: center;
	margin-left: 5%;
}
#music1{
	vertical-align: middle;
}
.title{
	text-align: center;
	background-color: #409EFF;
	border-radius: var(--el-border-radius-base);
	color: white;
	min-height: 40px;
	line-height: 40px;
}
.mar_top{
	margin-top: 8px;
	margin-bottom: 8px;
}
</style>
</head>
<body>
<div id="app" class="app">
	<h3 class="title">深度睡眠</h3>
	<div class="cell">
		<span>林中小溪</span>&nbsp;
		<audio id="music1" class="mar_top" controls="controls" loop="loop" preload>
			<source src="http://qn.wgf001.top/audio/xiaoxi.m4a" type="audio/mp3" />
			<source src="http://qn.wgf001.top/audio/xiaoxi.m4a" type="audio/ogg" />
			您的浏览器不支持此音频格式。
		</audio>
		<el-select class="mar_top" v-model="total_time" placeholder="Select">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
		</el-select>
		<!-- <button @click="start">开始</button> -->
		<el-button type="primary" @click="start">开始</el-button>
	</div>

	<div class="slider-demo-block">
		<el-slider style="width: 99%" v-model="current_time" :max="total_time"></el-slider>
		<span class="demonstration">播放进度：{{format_current_time()}} / {{format_total_time()}}</span>
	</div>
</div>

</body>
<script>
let audio = document.getElementById('music1');
// let minute = document.getElementById('minute');
// audio.currentTime	//当前播放时间
// audio.paused			//是否暂停
// audio.play();		// 这个就是播放
// audio.pause();		// 这个就是暂停

// function start(){
// 	let play_time = minute.value;
// 	setTimeout(function(){
// 		console.log("播放时间："+play_time);
// 		audio.pause()
// 	}, play_time * 1000);
// 	audio.play();
// }

const Main = {
	data() {
		return {
			current_time: 0,
			total_time: 1800,
			options: [
				{value: 600, label: '10分钟',},
				{value: 900, label: '15分钟',},
				{value: 1200, label: '20分钟',},
				{value: 1800, label: '30分钟',},
				{value: 2400, label: '40分钟',},
				{value: 3000, label: '50分钟',},
				{value: 3600, label: '60分钟',},
				{value: 4200, label: '70分钟',},
				{value: 4800, label: '80分钟',},
				{value: 5400, label: '90分钟',},
				{value: 6000, label: '100分钟',},
				{value: 7200, label: '120分钟',},
			],
			i: 0,
		}
	},
	methods:{
		start(){
			if(this.i){
				clearInterval(this.i);
			}
			this.current_time = 0;
			THIS = this
			audio.play();
			
			this.i = setInterval(function(){
				THIS.current_time += 1;
				if(THIS.current_time >= THIS.total_time){
					audio.pause();
					clearInterval(THIS.i);
				}
				// console.log("播放时间：" + THIS.current_time + " / " + THIS.total_time, THIS.i);
			}, 1000);
		},
		format_current_time(){
			let m = Math.floor(this.current_time / 60);
			let s = this.current_time % 60;
			m = m >= 10 ? m : '0' + m;
			s = s >= 10 ? s : '0' + s;
			return m + ":" + s;
		},
		format_total_time(){
			let m = Math.floor(this.total_time / 60);
			let s = this.total_time % 60;
			m = m >= 10 ? m : '0' + m;
			s = s >= 10 ? s : '0' + s;
			return m + ":" + s;
		}
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>